develop <-- Feature/dashboard & 🐛fix: useCardMutation에 InfiniteData타입 반영 by dkslel1225 · Pull Request #106 · CoPlay-FE/coplan

dkslel1225 · 2025-06-22T05:05:10Z

📌 남은 작업

🐛fix: useInfiniteQuery적용 후 캐시 구조 변경(InfiniteData) 반영하여 낙관적 업데이트 함수 수정

✨ 요약

📝 상세 내용

🔗 관련 이슈

🖼️ 스크린샷

✅ 체크리스트

브랜치 네이밍 컨벤션을 준수했습니다
커밋 컨벤션을 준수했습니다
코드가 프로젝트의 스타일 가이드라인을 준수합니다

💡 참고 사항

Summary by CodeRabbit

신규 기능
- 카드에 댓글 기능이 추가되어, 카드 상세에서 댓글 작성, 수정, 삭제 및 무한 스크롤 조회가 가능합니다.
- 카드 수정 모달이 도입되어, 카드 정보를 손쉽게 수정할 수 있습니다.
- 칼럼 및 카드 목록에 무한 스크롤이 적용되어 많은 데이터도 원활히 탐색할 수 있습니다.
UI/스타일 개선
- 카드, 칼럼, 버튼, 입력창 등 다양한 컴포넌트의 반응형 레이아웃과 스타일이 개선되었습니다.
- 다크 모드에서의 테두리 색상 등 세부 스타일이 조정되었습니다.
- 아바타, 테마 토글 등 flexbox 환경에서 크기 유지가 보장됩니다.
버그 수정
- 입력창, 버튼 등에서 모바일 환경 대응 및 접근성이 개선되었습니다.
알림/피드백
- 카드 및 댓글 생성, 수정, 삭제 시 알림(토스트) 메시지가 제공됩니다.
기타
- 내부적으로 코드 구조가 개선되고, 타입 정의가 추가되었습니다.

📝 TODO: - 담당자 옆 아바타에 반응형 사이즈 적용 필요 - 카드 수정 모달의 컬럼 선택 값을 form 데이터와 연결 필요

…board_id-CardModal

✨ Feat: 카드 상세 모달 구현

✨ Feat: 카드 목록, 모달 내 댓글 목록에 무한 스크롤 구현

🎨 style: 반응형 및 스타일 점검

…oplan into feature/dashboard_id

coderabbitai · 2025-06-22T05:05:16Z

Caution

Review failed

The pull request is closed.

Walkthrough

이 변경 사항은 대시보드 카드와 코멘트 기능에 무한 스크롤, 카드/코멘트 생성·수정·삭제, 반응형 UI 개선, 다크모드 지원, 바디 스크롤 락 등 다양한 기능을 추가 및 개선합니다. 또한, 관련 API 함수, 커스텀 훅, 타입 정의가 대폭 확장되었습니다.

Changes

파일/경로 그룹	변경 요약
src/app/dashboard/[id]/page.tsx	대시보드 컬럼 및 "새 컬럼 추가" 버튼의 flex 방향, 반응형 스타일 수정
src/app/features/dashboard_Id/Card/Card.tsx, .../Card/ColumnTitle.tsx	카드 컴포넌트에 카드 수정 모달 플로우 및 반응형 레이아웃/스타일 개선, 컬럼 타이틀 줄바꿈 방지 클래스 추가
.../Card/cardFormModals/AssigneeList.tsx, .../Card/cardFormModals/ColumnList.tsx, .../Card/cardFormModals/CreateCardForm.tsx, .../Card/cardFormModals/CreateCardModal.tsx, .../Card/cardFormModals/ModifyCardForm.tsx	카드 폼 및 모달 UI/스타일 개선, 이미지 업로드·삭제 UX 개선, 다크모드 스타일 추가, 불필요 코드 정리
.../Card/cardModal/CardContent.tsx, .../Card/cardModal/CardModal.tsx	카드 상세 모달에 코멘트 기능, 반응형/다크모드, 이벤트 핸들링 개선, 바디 스크롤 락 적용
.../Card/cardModal/Comment.tsx, .../Card/cardModal/CommentForm.tsx, .../Card/cardModal/CommentModifyForm.tsx, .../Card/cardModal/Comments.tsx	코멘트 컴포넌트 신설: 코멘트 생성, 수정, 삭제, 무한 스크롤, 반응형 UI 지원
.../Column/Column.tsx	카드 리스트 무한 스크롤로 전환, 에러 토스트 처리, 페이지네이션 UI 추가
.../api/deleteCard.ts, .../api/deleteComment.ts, .../api/fetchCards.ts, .../api/fetchComments.ts, .../api/postComment.ts, .../api/putCard.ts, .../api/putComment.ts	카드/코멘트 관련 CRUD API 함수 추가 및 파라미터 구조 개선, 타입 외부화
.../api/useCardMutation.ts, .../api/useDeleteCardMutation.ts, .../api/useDeleteCommentMutation.ts, .../api/useInfiniteCards.ts, .../api/useInfiniteComments.ts, .../api/usePostCard.ts, .../api/usePostCommentMutation.ts, .../api/usePutCardMutation.ts, .../api/usePutCommentsMutation.ts, .../api/useUploadCardImage.ts	카드/코멘트 관련 리액트 쿼리 훅 신설 및 로직 개선, 무한 스크롤 지원, 토스트 알림 추가, 에러 처리 개선
.../api/useCards.ts	기존 useCards 훅 삭제(무한 스크롤 훅으로 대체)
.../hooks/useInfiniteScroll.ts, .../hooks/useIsmobile.ts, .../hooks/useLockBodyScroll.ts	무한 스크롤, 모바일 감지, 바디 스크롤 락 커스텀 훅 신설
.../type/ApiResponse.ts, .../type/Comment.type.ts, .../type/CommentFormData.type.ts	API 응답/코멘트 관련 타입 신설 및 외부화
.../globals.css	다크모드, 모바일 대응 스타일 및 신규 Input-readOnly-217 클래스 추가
.../shared/components/ThemeToggle.tsx, .../shared/components/common/Avatar.tsx	shrink-0 유틸리티 클래스 추가로 flexbox 내 크기 고정

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CardList
  participant Column
  participant useInfiniteCards
  participant API

  User->>CardList: 스크롤 다운
  CardList->>Column: onScroll 이벤트
  Column->>useInfiniteCards: fetchNextPage()
  useInfiniteCards->>API: fetchCards({columnId, cursorId})
  API-->>useInfiniteCards: 카드 데이터 페이지
  useInfiniteCards-->>Column: 데이터 반환
  Column-->>CardList: 카드 리스트 렌더링

sequenceDiagram
  participant User
  participant CardModal
  participant CommentForm
  participant usePostCommentMutation
  participant API

  User->>CardModal: 카드 클릭(모달 오픈)
  User->>CommentForm: 코멘트 입력 후 제출
  CommentForm->>usePostCommentMutation: mutate({content, ...})
  usePostCommentMutation->>API: postComment(payload)
  API-->>usePostCommentMutation: 코멘트 응답
  usePostCommentMutation-->>CommentForm: 성공 콜백
  CommentForm-->>CardModal: 코멘트 리스트 갱신

Possibly related PRs

CoPlay-FE/coplan#105: 대시보드 페이지 flex 컨테이너 및 반응형 스타일 관련 직접적 코드 변경이 있습니다.
CoPlay-FE/coplan#101: 카드 모달, 코멘트 리스트, 무한 스크롤, 반응형 스타일 등 본 PR과 유사한 코드 흐름을 포함합니다.
CoPlay-FE/coplan#99: 카드 상세 모달 UI, 코멘트 통합, 카드 삭제 등 본 PR과 직접적인 UI/기능적 연관성이 있습니다.

Suggested labels

✨Feat, 🐛Fix

Suggested reviewers

LeeCh0129
Insung-Jo

Poem

🐇
새로운 카드, 댓글이 춤을 추네
무한 스크롤로 끝없이 펼쳐진 길
다크모드, 모바일, 모두 다 챙겼지
토스트 알림에 기분도 업!
토끼는 오늘도 코드를 달려
“삭제” 버튼도 귀엽게,
대시보드 세상은 더욱 풍성해졌네!
🌟

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

npm error Exit handler never called!
npm error This is an error with npm itself. Please report this error at:
npm error https://github.com/npm/cli/issues
npm error A complete log of this run can be found in: /.npm/_logs/2025-06-22T08_39_13_373Z-debug-0.log

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5ea58c8 and 1c14577.

📒 Files selected for processing (1)

src/app/dashboard/[id]/page.tsx (1 hunks)

✨ Finishing Touches

📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Explain this complex logic.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai explain this code block.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and explain its main purpose.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 17

🧹 Nitpick comments (22)

src/app/features/dashboard_Id/type/ApiResponse.ts (1)
1-3: 타입 중앙화가 잘 이루어졌습니다.

API 응답 타입을 중앙화한 것은 좋은 개선사항입니다. 코드 중복을 줄이고 일관성을 향상시켰네요.

향후 확장성을 고려하여 제네릭 타입으로 개선하는 것을 고려해볼 수 있습니다:
-export interface ApiResponse {
-  message: string
-}
+export interface ApiResponse<T = string> {
+  message: T
+  success?: boolean
+  data?: any
+}
src/app/shared/hooks/useLockBodyScroll.ts (1)
7-16: 구현이 기본적으로 올바르지만 몇 가지 개선사항이 있습니다.

현재 구현은 작동하지만 다음 사항들을 고려해보세요:

SSR 안전성: window 객체 체크 추가

레이아웃 shift 방지: 스크롤바 너비만큼 padding 보정

중첩 모달 지원: 참조 카운팅

더 견고한 구현을 위한 개선안:
export function useLockBodyScroll() {
  useEffect(() => {
+   if (typeof window === 'undefined') return
+   
    const originalStyle = window.getComputedStyle(document.body).overflow
+   const originalPadding = window.getComputedStyle(document.body).paddingRight
+   
+   // 스크롤바 너비만큼 padding 추가로 레이아웃 shift 방지
+   const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth
+   
    document.body.style.overflow = 'hidden'
+   document.body.style.paddingRight = `${parseInt(originalPadding) + scrollBarWidth}px`

    return () => {
      document.body.style.overflow = originalStyle
+     document.body.style.paddingRight = originalPadding
    }
  }, [])
}
src/app/shared/hooks/useIsmobile.ts (2)
3-3: 함수명의 camelCase 규칙을 준수해주세요.

함수명이 useIsmobile이 아니라 useIsMobile이어야 합니다. TypeScript/React 네이밍 컨벤션에 맞춰주세요.
-export function useIsMobile(breakpoint = 375) {
+export function useIsMobile(breakpoint = 375) {
14-21: resize 이벤트 최적화를 고려해보세요.

현재 구현은 좋지만, 성능 향상을 위해 resize 이벤트 디바운싱을 고려해볼 수 있습니다.

성능 최적화를 위한 디바운싱 적용:
  useEffect(() => {
    if (typeof window === 'undefined') return

+   let timeoutId: NodeJS.Timeout
    function handleResize() {
-     setIsMobile(window.innerWidth <= breakpoint)
+     clearTimeout(timeoutId)
+     timeoutId = setTimeout(() => {
+       setIsMobile(window.innerWidth <= breakpoint)
+     }, 100)
    }

    handleResize() // 초기 실행
    window.addEventListener('resize', handleResize)
-   return () => window.removeEventListener('resize', handleResize)
+   return () => {
+     clearTimeout(timeoutId)
+     window.removeEventListener('resize', handleResize)
+   }
  }, [breakpoint])
src/app/features/dashboard_Id/type/CommentFormData.type.ts (1)
18-20: 인터페이스 네이밍 일관성을 개선해주세요.

CommentFormData와 PutCommentForm의 네이밍이 일관적이지 않습니다. 다음 중 하나로 통일하는 것을 권장합니다:

옵션 1: 동사 기반 네이밍
-export interface PutCommentForm {
+export interface CommentUpdateFormData {
  content: string
}
옵션 2: 동작 기반 네이밍
-export interface CommentFormData {
+export interface CreateCommentForm {
  content: string
  cardId: number
  columnId: number
  dashboardId: number
}
-export interface PutCommentForm {
+export interface UpdateCommentForm {
  content: string
}
src/app/features/dashboard_Id/type/Comment.type.ts (1)
16-16: 불필요한 유니온 타입을 단순화하세요.

Comment[] | []에서 빈 배열 타입 []은 Comment[]에 이미 포함되어 있으므로 불필요합니다.
-  comments: Comment[] | []
+  comments: Comment[]
src/app/features/dashboard_Id/api/postComment.ts (1)

6-6: 타입명의 일관성을 개선하세요.

함수명이 postComment인데 파라미터 타입이 PutCommentForm으로 명명되어 있어 혼란을 줄 수 있습니다. PUT과 POST는 다른 HTTP 메서드이므로 일관성 있는 명명이 필요합니다.

타입명을 PostCommentForm 또는 CommentCreateForm으로 변경하는 것을 고려해보세요.
src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1)
1-1: 사용되지 않는 import를 제거하세요.

UseFormSetValue 타입이 import되었지만 컴포넌트 코드에서 실제로 사용되지 않고 있습니다. 불필요한 import는 코드 가독성을 해치고 번들 크기에 영향을 줄 수 있습니다.
-import { ControllerRenderProps, UseFormSetValue } from 'react-hook-form'
+import { ControllerRenderProps } from 'react-hook-form'
src/app/features/dashboard_Id/api/useCardMutation.ts (1)
56-56: 디버깅 코드 제거 필요

프로덕션 환경에 적합하지 않은 디버깅용 console.log 문이 추가되었습니다. 개발 완료 후 제거해야 합니다.
-          console.log('oldData', oldData)
src/app/features/dashboard_Id/api/deleteComment.ts (1)
5-10: API 함수 구현 승인 및 개선 제안

댓글 삭제 API 함수의 기본 구조는 적절합니다. 하지만 다음 개선사항을 고려해보세요:

commentId 파라미터 유효성 검사 (양수 확인)

API 호출 실패 시 에러 처리 개선
 export async function deleteComment(commentId: number): Promise<ApiResponse> {
+  if (!commentId || commentId <= 0) {
+    throw new Error('유효하지 않은 댓글 ID입니다.')
+  }
+  
   const res = await authHttpClient.delete(
     `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
   )
   return res.data
 }
src/app/globals.css (1)
112-114: 새로운 고정 너비 클래스의 네이밍을 개선해보세요.

Input-readOnly-217 클래스명에 픽셀 값이 직접 포함되어 있어 유지보수성이 떨어질 수 있습니다.

더 의미 있는 이름을 사용해보세요:
-.Input-readOnly-217 {
+.Input-readOnly-compact {
  @apply w-217 cursor-pointer rounded-6 border border-[#D9D9D9] px-16 py-11 pt-14 text-14 text-[#333236] placeholder-gray-400 caret-transparent focus:border-[#44aeff] focus:outline-none dark:border-[#747474] dark:text-[#FFFFFF] dark:focus:border-[#3474a5] mobile:w-280;
}
src/app/features/dashboard_Id/api/usePutCommentsMutation.ts (1)
12-12: 주석 내용이 잘못되었습니다.

댓글 수정 기능에 대한 hook인데 "카드 생성 모달에서 사용"이라고 잘못 기재되어 있습니다.
-// ✅ 카드 생성 모달에서 사용 (CreateCardForm.tsx)
+// ✅ 댓글 수정 시 사용 (CommentModifyForm.tsx)
src/app/features/dashboard_Id/Card/cardModal/Comments.tsx (1)
31-31: 고정된 width 값을 반응형으로 변경하세요.

w-450과 같은 고정된 width 값은 모바일 환경에서 문제가 될 수 있습니다.
-<div className="flex w-450 flex-col gap-20">
+<div className="flex w-full max-w-450 flex-col gap-20 mobile:max-w-full">
src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx (2)
30-31: 프로덕션용 디버그 로그를 제거하세요.

콘솔 로그는 개발 중에만 사용하고 프로덕션 코드에서는 제거해야 합니다.
-    console.log(data)
-    console.log(commentId)
27-27: 변수명을 더 명확하게 개선하세요.

댓글 수정 작업인데 createComment라는 이름은 혼란을 줄 수 있습니다.
-  const { mutate: createComment, isPending } = usePutCommentMutation()
+  const { mutate: updateComment, isPending } = usePutCommentMutation()
그리고 onSubmit 함수에서도:
-    createComment({ payload: data, commentId })
+    updateComment({ payload: data, commentId })
src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx (1)
34-34: 프로덕션용 디버그 로그를 제거하세요.

콘솔 로그는 개발 중에만 사용하고 프로덕션 코드에서는 제거해야 합니다.
-    console.log(payload)
src/app/features/dashboard_Id/Card/cardModal/Comment.tsx (1)
52-52: 댓글 삭제 시 확인 프롬프트를 추가하는 것을 고려하세요.

사용자의 실수로 인한 댓글 삭제를 방지하기 위해 확인 단계를 추가하면 좋겠습니다.
-            <button onClick={() => deleteComment(comment.id)}>삭제</button>
+            <button onClick={() => {
+              if (confirm('댓글을 삭제하시겠습니까?')) {
+                deleteComment(comment.id)
+              }
+            }}>삭제</button>
src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx (5)
29-29: 사용하지 않는 isPending 변수를 제거하세요.

isPending 변수가 구조 분해 할당되었지만 컴포넌트 내에서 사용되지 않습니다.
-  const { mutate: deleteCard, isPending } = useDeleteCardMutation()
+  const { mutate: deleteCard } = useDeleteCardMutation()
37-40: 중복된 overflow 속성을 정리하세요.

overflow-auto와 overflow-y-scroll이 중복 적용되어 있습니다. 하나만 사용하면 충분합니다.
-      className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
+      className="BG-white relative max-h-764 min-h-764 w-730 overflow-y-auto rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
51-68: 다크 모드 아이콘 렌더링 코드를 간소화하세요.

동일한 조건부 렌더링 패턴이 반복되고 있습니다. 헬퍼 함수나 컴포넌트로 추출하면 코드 중복을 줄일 수 있습니다.

다음과 같은 헬퍼 함수를 추가하는 것을 고려해보세요:
const getImageSrc = (lightSrc: string, darkSrc: string) => {
  return isDark ? darkSrc : lightSrc
}

// 사용 예:
<Image
  src={getImageSrc('/images/drop-more.svg', '/images/drop-more-darkmode.svg')}
  alt="드롭 옵션 보기"
  width={28}
  height={28}
  className="mobile:size-20"
/>
Also applies to: 98-115

183-183: 불필요한 빈 div 요소를 제거하세요.

빈 div 요소가 아무 역할을 하지 않으므로 제거해야 합니다.
         </div>
-        <div></div>
       </div>
17-194: 컴포넌트 분리를 고려해보세요.

CardContent 컴포넌트가 카드 표시, 액션 메뉴, 댓글 등 여러 책임을 가지고 있습니다. 다음과 같이 분리하면 유지보수성이 향상될 수 있습니다:

CardActions: 케밥 메뉴와 닫기 버튼

CardDetails: 카드 정보 표시 부분

CardComments: 댓글 관련 부분

이렇게 분리하면 각 컴포넌트의 책임이 명확해지고 테스트하기도 쉬워집니다.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9169f13 and 6f4d5f5.

⛔ Files ignored due to path filters (3)

public/images/close-darkmode.svg is excluded by !**/*.svg
public/images/drop-more-darkmode.svg is excluded by !**/*.svg
public/images/modify-pen.svg is excluded by !**/*.svg

📒 Files selected for processing (42)

src/app/dashboard/[id]/page.tsx (1 hunks)
src/app/features/dashboard_Id/Card/Card.tsx (3 hunks)
src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (4 hunks)
src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (10 hunks)
src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardModal/Comment.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx (1 hunks)
src/app/features/dashboard_Id/Card/cardModal/Comments.tsx (1 hunks)
src/app/features/dashboard_Id/Column/Column.tsx (7 hunks)
src/app/features/dashboard_Id/api/deleteCard.ts (1 hunks)
src/app/features/dashboard_Id/api/deleteComment.ts (1 hunks)
src/app/features/dashboard_Id/api/fetchCards.ts (1 hunks)
src/app/features/dashboard_Id/api/fetchComments.ts (1 hunks)
src/app/features/dashboard_Id/api/postComment.ts (1 hunks)
src/app/features/dashboard_Id/api/putCard.ts (1 hunks)
src/app/features/dashboard_Id/api/putComment.ts (1 hunks)
src/app/features/dashboard_Id/api/useCardMutation.ts (1 hunks)
src/app/features/dashboard_Id/api/useCards.ts (0 hunks)
src/app/features/dashboard_Id/api/useDeleteCardMutation.ts (1 hunks)
src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts (1 hunks)
src/app/features/dashboard_Id/api/useInfiniteCards.ts (1 hunks)
src/app/features/dashboard_Id/api/useInfiniteComments.ts (1 hunks)
src/app/features/dashboard_Id/api/usePostCard.ts (2 hunks)
src/app/features/dashboard_Id/api/usePostCommentMutation.ts (1 hunks)
src/app/features/dashboard_Id/api/usePutCardMutation.ts (2 hunks)
src/app/features/dashboard_Id/api/usePutCommentsMutation.ts (1 hunks)
src/app/features/dashboard_Id/api/useUploadCardImage.ts (1 hunks)
src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts (1 hunks)
src/app/features/dashboard_Id/type/ApiResponse.ts (1 hunks)
src/app/features/dashboard_Id/type/Comment.type.ts (1 hunks)
src/app/features/dashboard_Id/type/CommentFormData.type.ts (1 hunks)
src/app/globals.css (2 hunks)
src/app/shared/components/ThemeToggle.tsx (1 hunks)
src/app/shared/components/common/Avatar.tsx (2 hunks)
src/app/shared/hooks/useIsmobile.ts (1 hunks)
src/app/shared/hooks/useLockBodyScroll.ts (1 hunks)

💤 Files with no reviewable changes (1)

src/app/features/dashboard_Id/api/useCards.ts

🧰 Additional context used

🧬 Code Graph Analysis (22)

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx (1)

src/app/shared/hooks/useLockBodyScroll.ts (1)

useLockBodyScroll (7-16)

src/app/features/dashboard_Id/api/deleteComment.ts (1)

src/app/features/dashboard_Id/type/ApiResponse.ts (1)

ApiResponse (1-3)

src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts (1)

src/app/features/dashboard_Id/api/deleteComment.ts (1)

deleteComment (5-10)

src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx (1)

src/app/shared/hooks/useLockBodyScroll.ts (1)

useLockBodyScroll (7-16)

src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (2)

src/app/features/dashboard_Id/type/Card.type.ts (1)

Assignee (1-5)

src/app/shared/lib/cn.ts (1)

cn (4-6)

src/app/features/dashboard_Id/api/deleteCard.ts (1)

src/app/features/dashboard_Id/type/ApiResponse.ts (1)

ApiResponse (1-3)

src/app/features/dashboard_Id/api/postComment.ts (1)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (2)

PutCommentForm (18-20)

CommentResponse (9-16)

src/app/features/dashboard_Id/api/putComment.ts (1)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (2)

PutCommentForm (18-20)

CommentResponse (9-16)

src/app/features/dashboard_Id/api/usePutCommentsMutation.ts (2)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (2)

PutCommentForm (18-20)

CommentResponse (9-16)

src/app/features/dashboard_Id/api/putComment.ts (1)

putComment (5-14)

src/app/features/dashboard_Id/api/useDeleteCardMutation.ts (1)

src/app/features/dashboard_Id/api/deleteCard.ts (1)

deleteCard (5-10)

src/app/features/dashboard_Id/api/usePostCommentMutation.ts (1)

src/app/features/dashboard_Id/api/postComment.ts (1)

postComment (5-13)

src/app/features/dashboard_Id/Card/cardModal/Comments.tsx (4)

src/app/features/dashboard_Id/api/useInfiniteComments.ts (1)

useInfiniteComments (6-17)

src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts (1)

useInfiniteScroll (11-39)

src/app/features/dashboard_Id/type/Comment.type.ts (1)

Comment (6-13)

src/app/features/dashboard_Id/Card/cardModal/Comment.tsx (1)

Comment (11-58)

src/app/features/dashboard_Id/api/fetchComments.ts (1)

src/app/features/dashboard_Id/type/Comment.type.ts (1)

CommentsResponse (14-17)

src/app/features/dashboard_Id/api/useInfiniteComments.ts (2)

src/app/features/dashboard_Id/type/Comment.type.ts (1)

CommentsResponse (14-17)

src/app/features/dashboard_Id/api/fetchComments.ts (1)

fetchComments (5-25)

src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx (2)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (1)

PutCommentForm (18-20)

src/app/features/dashboard_Id/api/usePutCommentsMutation.ts (1)

usePutCommentMutation (13-30)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (1)

src/app/features/dashboard_Id/type/Comment.type.ts (1)

Auth (1-5)

src/app/features/dashboard_Id/api/useInfiniteCards.ts (2)

src/app/features/dashboard_Id/type/Card.type.ts (1)

CardResponse (21-25)

src/app/features/dashboard_Id/api/fetchCards.ts (1)

fetchCards (5-25)

src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx (2)

src/app/features/dashboard_Id/type/CommentFormData.type.ts (1)

CommentFormData (3-8)

src/app/features/dashboard_Id/api/usePostCommentMutation.ts (1)

usePostCommentMutation (7-24)

src/app/features/dashboard_Id/api/fetchCards.ts (1)

src/app/features/dashboard_Id/type/Card.type.ts (1)

CardResponse (21-25)

src/app/features/dashboard_Id/type/Comment.type.ts (1)

src/app/features/dashboard_Id/Card/cardModal/Comment.tsx (1)

Comment (11-58)

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (2)

src/app/features/dashboard_Id/Card/MyAssignee.tsx (1)

MyAssignee (5-18)

src/app/shared/lib/cn.ts (1)

cn (4-6)

src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (2)

src/app/features/dashboard_Id/Card/MyAssignee.tsx (1)

MyAssignee (5-18)

src/app/shared/lib/cn.ts (1)

cn (4-6)

⏰ Context from checks skipped due to timeout of 90000ms (1)

GitHub Check: eslint-check

🔇 Additional comments (63)

src/app/features/dashboard_Id/api/putCard.ts (1)

3-3: 타입 import가 올바르게 적용되었습니다.

중앙화된 ApiResponse 타입을 사용하도록 변경한 것이 좋습니다. 타입 일관성과 유지보수성이 향상되었네요.
src/app/features/dashboard_Id/type/CommentFormData.type.ts (2)

3-8: CommentFormData 인터페이스가 잘 정의되었습니다.

댓글 생성에 필요한 모든 필드가 적절히 포함되어 있습니다.

9-16: 타임스탬프 타입 검증이 필요합니다.

createdAt과 updatedAt 필드가 number 타입으로 정의되어 있는데, 실제 API 응답에서 이 타입이 맞는지 확인해주세요.
#!/bin/bash
# 설명: API 응답에서 타임스탬프 타입 확인

# 댓글 API 응답 구조 확인
rg -A 10 -B 2 "createdAt|updatedAt" --type ts
src/app/features/dashboard_Id/type/Comment.type.ts (2)

1-17: 인터페이스 설계가 잘 되어 있습니다.

댓글 시스템의 핵심 타입들이 명확하게 정의되어 있고, 관련 컴포넌트에서의 사용 패턴과 잘 맞아떨어집니다. 특히 Auth 인터페이스를 별도로 분리한 것이 재사용성 측면에서 좋은 설계입니다.

9-10: 다음과 같이 glob 옵션으로 .ts 파일만 검색하도록 스크립트를 수정해 보겠습니다.
#!/bin/bash
# createdAt, updatedAt 타입 정의 및 사용 현황 확인

# 모든 .ts 파일에서 createdAt 필드 검색
rg -n "createdAt\s*:" --glob '*.ts'

# 모든 .ts 파일에서 updatedAt 필드 검색
rg -n "updatedAt\s*:" --glob '*.ts'
src/app/features/dashboard_Id/api/postComment.ts (1)

5-13: PutCommentForm 정의가 있는 파일을 정확히 찾아 내용을 출력해 보겠습니다.
#!/bin/bash
# PutCommentForm 인터페이스 정의 파일 찾기
FILE=$(rg -l "^export interface PutCommentForm" -g "*CommentFormData.type.ts")
echo "Definition file: $FILE"

# 해당 파일 상위 200라인 출력
sed -n '1,200p' "$FILE"
src/app/features/dashboard_Id/Card/ColumnTitle.tsx (1)

5-5: UI 일관성 개선이 잘 되었습니다.

whitespace-nowrap 클래스 추가로 컬럼 타이틀이 항상 한 줄에 표시되어 레이아웃의 일관성과 가독성이 향상되었습니다. 특히 반응형 디자인에서 컬럼 타이틀의 안정적인 표시에 도움이 될 것입니다.

src/app/shared/components/ThemeToggle.tsx (1)

18-18: Flexbox 동작 개선이 적절합니다.

shrink-0 클래스 추가로 ThemeToggle 버튼이 flex 컨테이너에서 고정 크기를 유지하도록 개선되었습니다. 이는 다양한 레이아웃 상황에서 버튼의 일관된 모양을 보장하는 좋은 변경사항입니다.

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardModal.tsx (2)

3-3: 스크롤 잠금 기능 추가 승인

useLockBodyScroll 훅 추가로 모달이 열렸을 때 배경 스크롤을 방지하는 것은 좋은 UX 개선입니다. CardModal과의 일관성도 유지되고 있습니다.

Also applies to: 11-11

17-17: 반응형 스타일링 개선 승인

모바일 디바이스 지원을 위한 반응형 클래스 추가가 적절합니다. mobile:h-766 mobile:w-327 mobile:px-16 mobile:py-24 클래스들이 모바일 환경에서의 사용성을 향상시킬 것입니다.

src/app/features/dashboard_Id/Card/cardModal/CardModal.tsx (2)

3-3: 모달 일관성 개선 승인

CreateCardModal과 동일한 useLockBodyScroll 훅을 적용하여 모달 간 일관성을 유지한 것이 좋습니다. 사용자 경험이 향상될 것입니다.

Also applies to: 11-11

17-17: 모달 구조 단순화 승인

복잡한 스타일링을 제거하고 단순한 wrapper div로 변경한 것이 적절합니다. 더 깔끔하고 유지보수하기 쉬운 구조가 되었습니다.

src/app/features/dashboard_Id/api/usePostCard.ts (1)

3-3: 사용자 피드백 개선 승인

성공/실패 시 토스트 알림을 추가하여 사용자 경험이 크게 향상되었습니다. 다른 mutation 훅들과 일관성 있는 피드백 시스템을 구축한 것이 좋습니다.

Also applies to: 14-14, 18-19

src/app/shared/components/common/Avatar.tsx (2)

53-53: flex 컨테이너에서 아바타 크기 유지 개선이 좋습니다.

shrink-0 클래스 추가로 flex 컨테이너 내에서 아바타가 의도된 크기를 유지할 수 있게 되었습니다.

65-65: 일관된 스타일링 적용이 좋습니다.

폴백 아바타에도 동일한 shrink-0 클래스를 적용하여 일관성을 유지했습니다.

src/app/globals.css (2)

73-73: 다크 모드 테두리 색상 개선이 좋습니다.

검은색에서 중간 회색(#454545)으로 변경하여 다크 모드에서 더 부드러운 시각적 경험을 제공합니다.

107-111: 모바일 반응형 지원 추가가 좋습니다.

입력 필드에 mobile:w-280 클래스를 추가하여 모바일 디바이스에서 적절한 너비를 제공합니다.

src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx (2)

31-31: 명시적인 테두리 색상 사용으로 스타일링 일관성 개선.

기존 Border-btn 클래스 대신 라이트/다크 모드별 명시적인 테두리 색상을 사용하여 더 정확한 스타일 제어가 가능합니다.

36-38: 담당자 항목 간 구분선 스타일링 개선.

첫 번째 항목을 제외한 나머지 항목에 테두리와 텍스트 크기를 명시적으로 지정하여 다크 모드에서도 일관된 표시가 가능합니다.

src/app/features/dashboard_Id/api/useUploadCardImage.ts (1)

12-17: 에러 핸들링 개선이 적절합니다

사용자용 고정 메시지와 개발자용 서버 에러 로그를 분리한 접근 방식이 좋습니다. 사용자 경험을 개선하면서 디버깅에 필요한 정보도 보존하고 있습니다.

src/app/features/dashboard_Id/api/usePutCardMutation.ts (1)

8-34: 카드 수정 기능이 잘 구현되었습니다

토스트 알림 추가와 columnId 쿼리 무효화로 사용자 경험과 데이터 일관성이 모두 개선되었습니다. 에러 핸들링도 적절합니다.

src/app/features/dashboard_Id/api/useDeleteCardMutation.ts (1)

6-20: 카드 삭제 기능이 잘 구현되었습니다

토스트 알림, 쿼리 캐시 무효화, 에러 핸들링이 모두 적절하게 구현되어 있습니다. 다른 mutation 훅들과 일관된 패턴을 따르고 있어 좋습니다.

src/app/dashboard/[id]/page.tsx (2)

150-150: 반응형 레이아웃 개선이 적절합니다.

flex 클래스 순서를 조정하여 모바일과 태블릿에서 세로 방향 레이아웃으로 변경한 것이 좋습니다.

158-160: 반응형 버튼 스타일링이 잘 적용되었습니다.

모바일과 태블릿에서의 버튼 레이아웃과 스타일링이 적절하게 구현되었습니다.

src/app/features/dashboard_Id/api/fetchComments.ts (1)

19-19: 조건부 파라미터 처리가 적절합니다.

첫 페이지에서 cursorId를 생략하는 로직이 올바르게 구현되었습니다.

src/app/features/dashboard_Id/api/useInfiniteCards.ts (1)

11-16: 무한 스크롤 로직이 올바르게 구현되었습니다.

getNextPageParam 함수가 적절히 구현되어 있고, 페이지네이션 로직이 정확합니다.

src/app/features/dashboard_Id/api/fetchCards.ts (1)

5-25: API 함수가 잘 구현되었습니다.

매개변수 구조화와 조건부 cursorId 처리가 적절하며, 무한 스크롤을 위한 페이지네이션 지원이 올바르게 구현되었습니다.

src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx (1)

27-37: 폼 제출 로직이 적절히 구현되었습니다.

데이터 병합과 뮤테이션 호출, 폼 리셋이 올바르게 처리되었습니다.

src/app/features/dashboard_Id/Card/cardModal/Comment.tsx (2)

18-30: 반응형 디자인이 잘 구현되었습니다.

useIsMobile 훅을 사용한 조건부 아바타 크기 조정이 적절합니다.

40-48: 조건부 렌더링 로직이 올바르게 구현되었습니다.

수정 모드와 표시 모드 간의 전환이 명확하고 사용자 친화적입니다.

src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx (5)

17-17: MyAssignee 컴포넌트 import 추가 승인

담당자 선택 UI 개선을 위한 새로운 컴포넌트 import가 적절합니다.

124-128: 담당자 표시 UI 개선 승인

선택된 담당자를 입력 필드 내에 절대 위치로 표시하는 방식이 사용자 경험을 향상시킵니다. 다크 모드 배경색도 적절히 적용되었습니다.

135-135: 모바일 반응형 스타일 개선 승인

드롭다운 화살표의 모바일 위치 조정이 적절합니다.

237-276: 이미지 업로드 UI 구조 개선 승인

이미지 업로드 UI의 구조적 개선사항들이 우수합니다:

라벨 래퍼 스타일링 추가

업로드 중 상태에 대한 조건부 렌더링

이미지 삭제 버튼 위치 및 텍스트 개선 ("삭제")

다크 모드 테두리 스타일 추가

모든 변경사항이 사용자 경험을 향상시킵니다.

296-296: 제출 버튼 다크 모드 지원 승인

disabled 상태에 대한 다크 모드 스타일링이 적절히 추가되었습니다.

src/app/features/dashboard_Id/Column/Column.tsx (8)

3-3: 무한 스크롤 관련 import 추가 승인

토스트 알림, 무한 스크롤 API 훅, 커스텀 무한 스크롤 훅의 추가가 적절합니다.

Also applies to: 8-8, 12-12

27-36: 무한 스크롤 데이터 페칭 로직 승인

기존 페이지네이션에서 무한 스크롤로의 전환이 올바르게 구현되었습니다. 필요한 모든 상태값들(fetchNextPage, hasNextPage, isFetchingNextPage 등)이 적절히 구조분해되었습니다.

36-36: 무한 스크롤 훅 사용 승인

useInfiniteScroll 훅의 사용이 간결하고 적절합니다.

54-55: 에러 처리 개선 승인

토스트 알림을 사용한 에러 처리 방식이 사용자 경험을 개선합니다.

85-85: 반응형 스타일 개선 승인

모바일, 태블릿에 대한 너비 조정이 적절합니다.

96-96: 카드 개수 표시 로직 개선 승인

페이지 구조에서 첫 번째 페이지의 totalCount를 사용하는 방식이 올바릅니다.

122-126: 무한 스크롤 카드 렌더링 로직 승인

여러 페이지에 걸친 카드들을 평면화하여 렌더링하는 로직이 올바르게 구현되었습니다.

137-148: 무한 스크롤 UI 피드백 승인

로딩 상태와 완료 상태에 대한 사용자 피드백이 적절히 구현되었습니다.

src/app/features/dashboard_Id/Card/Card.tsx (5)

9-10: 카드 수정 모달 컴포넌트 import 승인

카드 수정 기능을 위한 새로운 컴포넌트들의 import가 적절합니다.

25-27: 카드 수정 상태 및 컬럼 정보 추출 승인

수정 모달을 위한 상태 추가와 컬럼 정보 추출이 적절합니다.

39-90: 카드 레이아웃 반응형 개선 승인

카드 내용의 반응형 레이아웃 개선이 매우 우수합니다:

모바일에서 세로 배치, 태블릿에서 가로 배치

이미지 크기 및 위치 조정

제목, 태그, 마감일, 담당자 영역의 구조적 개선

각 화면 크기별 적절한 간격 및 정렬

모든 변경사항이 다양한 디바이스에서의 사용자 경험을 크게 향상시킵니다.

96-96: 카드 수정 모달 콜백 전달 승인

CardContent에 openModifyModal 콜백을 전달하는 방식이 적절합니다.

103-112: 카드 수정 모달 렌더링 승인

카드 수정 모달의 조건부 렌더링과 필요한 props 전달이 올바르게 구현되었습니다.

src/app/features/dashboard_Id/hooks/useInfiniteScroll.ts (3)

3-16: 무한 스크롤 훅 인터페이스 설계 승인

훅의 매개변수 설계가 매우 우수합니다:

명확한 타입 정의

선택적 targetRef로 윈도우/엘리먼트 스크롤 모두 지원

상세한 JSDoc 문서화

범용적이고 재사용 가능한 설계입니다.

17-30: 스크롤 처리 로직 승인

스크롤 위치 계산 및 트리거 로직이 올바르게 구현되었습니다:

윈도우와 엘리먼트 모두에 대한 적절한 속성 접근

80% 지점에서 트리거하는 합리적인 임계값

중복 요청 방지를 위한 상태 체크

useCallback을 통한 성능 최적화

모든 로직이 정확하고 효율적입니다.

32-39: 이벤트 리스너 관리 승인

이벤트 리스너의 등록 및 해제가 적절히 구현되었습니다:

passive: true 옵션으로 성능 최적화

컴포넌트 언마운트 시 적절한 정리

의존성 배열을 통한 적절한 재등록

메모리 누수 방지와 성능 최적화가 잘 되어 있습니다.

src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx (12)

6-6: useRef import 추가 승인

향후 ref 사용을 위한 import 추가가 적절합니다.

39-39: 태그 상태 초기화 수정 승인

card.tags로 직접 초기화하는 방식이 더 명확하고 안전합니다.

66-74: 폼 기본값 방어적 처리 승인

nullable 값들에 대한 방어적 기본값 설정이 우수합니다:

assigneeUserId, dueDate, tags, imageUrl에 대한 안전한 처리

빈 문자열 및 빈 배열 fallback 제공

런타임 에러를 방지하는 견고한 코드입니다.

80-80: 태그 변경 시 dirty 플래그 설정 승인

shouldDirty: true 옵션으로 태그 변경 시 폼이 dirty 상태가 되도록 하는 처리가 적절합니다.

114-114: 선택된 컬럼 ID 사용 승인

제출 시 현재 선택된 컬럼의 ID를 사용하는 로직이 올바릅니다.

127-131: 이벤트 버블링 방지 승인

폼에서 stopPropagation 처리가 모달 배경 클릭과의 충돌을 방지합니다.

134-134: 모바일 반응형 레이아웃 승인

모바일에서 세로 배치로 변경되는 반응형 스타일이 적절합니다.

146-146: 입력 필드 스타일 클래스 일관성 승인

Input-readOnly-217 클래스 사용으로 일관된 스타일링이 적용되었습니다.

Also applies to: 188-188

152-152: 모바일 위치 조정 승인

모바일에서 엘리먼트들의 위치 조정이 적절합니다.

Also applies to: 161-161, 204-204

191-197: 담당자 표시 조건부 렌더링 승인

선택된 담당자가 있을 때만 MyAssignee 컴포넌트를 표시하는 로직과 다크 모드 배경 처리가 적절합니다.

306-356: 이미지 업로드 UI 대폭 개선 승인

이미지 업로드 UI의 개선사항들이 매우 우수합니다:

다크 모드 테두리 스타일 추가

조건부 렌더링 개선 (미리보기/업로드 중/플러스 아이콘)

삭제 버튼 위치 및 텍스트 개선

원본 이미지일 때 수정 가능 표시 오버레이 추가

모든 변경사항이 사용자 경험을 크게 향상시킵니다.

376-376: 제출 버튼 다크 모드 지원 승인

disabled 상태에 대한 다크 모드 스타일링이 일관성 있게 적용되었습니다.

coderabbitai · 2025-06-22T05:10:00Z

src/app/features/dashboard_Id/api/deleteCard.ts

+export async function deleteCard(cardId: number): Promise<ApiResponse> {
+  const res = await authHttpClient.delete(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,
+  )
+  return res.data
+}


🛠️ Refactor suggestion

환경 변수 유효성 검증과 에러 처리를 추가하세요.

현재 구현에서 process.env.NEXT_PUBLIC_TEAM_ID가 undefined일 경우와 HTTP 요청 실패 시에 대한 처리가 없습니다.

다음과 같이 개선해보세요:

export async function deleteCard(cardId: number): Promise<ApiResponse> { + const teamId = process.env.NEXT_PUBLIC_TEAM_ID + if (!teamId) { + throw new Error('NEXT_PUBLIC_TEAM_ID가 설정되지 않았습니다.') + } + + try { const res = await authHttpClient.delete( - `/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`, + `/${teamId}/cards/${cardId}`, ) return res.data + } catch (error) { + console.error('카드 삭제 중 오류 발생:', error) + throw error + } }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export async function deleteCard(cardId: number): Promise<ApiResponse> {

const res = await authHttpClient.delete(

`/${process.env.NEXT_PUBLIC_TEAM_ID}/cards/${cardId}`,

)

return res.data

}

export async function deleteCard(cardId: number): Promise<ApiResponse> {

const teamId = process.env.NEXT_PUBLIC_TEAM_ID

if (!teamId) {

throw new Error('NEXT_PUBLIC_TEAM_ID가 설정되지 않았습니다.')

}

try {

const res = await authHttpClient.delete(

`/${teamId}/cards/${cardId}`,

)

return res.data

} catch (error) {

console.error('카드 삭제 중 오류 발생:', error)

throw error

}

}

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/api/deleteCard.ts between lines 5 and 10, add validation to check if process.env.NEXT_PUBLIC_TEAM_ID is defined before making the HTTP delete request. If it is undefined, throw an appropriate error. Also, wrap the HTTP request in a try-catch block to handle any request failures and throw or return a meaningful error response accordingly.

coderabbitai · 2025-06-22T05:10:00Z

src/app/features/dashboard_Id/api/putComment.ts

+export async function putComment(
+  payload: PutCommentForm,
+  commentId: number,
+): Promise<CommentResponse> {
+  const res = await authHttpClient.put(
+    `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,
+    payload,
+  )
+  return res.data
+}


🛠️ Refactor suggestion

환경 변수 검증과 에러 처리를 추가하세요.

deleteCard.ts와 동일한 문제가 있습니다. 환경 변수 유효성 검증과 HTTP 요청 실패 시 에러 처리가 필요합니다.

다음과 같이 개선해보세요:

export async function putComment( payload: PutCommentForm, commentId: number, ): Promise<CommentResponse> { + const teamId = process.env.NEXT_PUBLIC_TEAM_ID + if (!teamId) { + throw new Error('NEXT_PUBLIC_TEAM_ID가 설정되지 않았습니다.') + } + + try { const res = await authHttpClient.put( - `/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`, + `/${teamId}/comments/${commentId}`, payload, ) return res.data + } catch (error) { + console.error('댓글 수정 중 오류 발생:', error) + throw error + } }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export async function putComment(

payload: PutCommentForm,

commentId: number,

): Promise<CommentResponse> {

const res = await authHttpClient.put(

`/${process.env.NEXT_PUBLIC_TEAM_ID}/comments/${commentId}`,

payload,

)

return res.data

}

export async function putComment(

payload: PutCommentForm,

commentId: number,

): Promise<CommentResponse> {

const teamId = process.env.NEXT_PUBLIC_TEAM_ID

if (!teamId) {

throw new Error('NEXT_PUBLIC_TEAM_ID가 설정되지 않았습니다.')

}

try {

const res = await authHttpClient.put(

`/${teamId}/comments/${commentId}`,

payload,

)

return res.data

} catch (error) {

console.error('댓글 수정 중 오류 발생:', error)

throw error

}

}

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/api/putComment.ts lines 5 to 14, add validation to check if the environment variable NEXT_PUBLIC_TEAM_ID is defined before using it in the URL. Also, wrap the HTTP PUT request in a try-catch block to handle possible errors during the request. If the environment variable is missing, throw an explicit error. In the catch block, handle or rethrow the error appropriately to ensure failures are managed gracefully.

coderabbitai · 2025-06-22T05:10:01Z

src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts

+export function useDeleteCommentMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (commentId: number) => deleteComment(commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 리스트 캐시 무효화
+    },
+    onError: (error) => {
+      console.error('댓글 삭제 실패:', error)
+    },
+  })
+}


🛠️ Refactor suggestion

사용자 피드백을 위한 토스트 알림 추가 필요

다른 mutation 훅들(useDeleteCardMutation, usePutCardMutation)과 일관성을 위해 성공/실패 시 토스트 알림을 추가하는 것을 권장합니다.

+import { toast } from 'sonner' + import { deleteComment } from './deleteComment' export function useDeleteCommentMutation() { const queryClient = useQueryClient() return useMutation({ mutationFn: (commentId: number) => deleteComment(commentId), onSuccess: () => { + toast.success('댓글이 삭제되었습니다') queryClient.invalidateQueries({ queryKey: ['comments'] }) }, onError: (error) => { + toast.error('댓글 삭제에 실패했습니다') console.error('댓글 삭제 실패:', error) }, }) }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

export function useDeleteCommentMutation() {

const queryClient = useQueryClient()

return useMutation({

mutationFn: (commentId: number) => deleteComment(commentId),

onSuccess: () => {

queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 리스트 캐시 무효화

},

onError: (error) => {

console.error('댓글 삭제 실패:', error)

},

})

}

import { toast } from 'sonner'

import { deleteComment } from './deleteComment'

export function useDeleteCommentMutation() {

const queryClient = useQueryClient()

return useMutation({

mutationFn: (commentId: number) => deleteComment(commentId),

onSuccess: () => {

toast.success('댓글이 삭제되었습니다')

queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 리스트 캐시 무효화

},

onError: (error) => {

toast.error('댓글 삭제에 실패했습니다')

console.error('댓글 삭제 실패:', error)

},

})

}

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/api/useDeleteCommentMutation.ts between lines 5 and 17, add toast notifications for both success and error cases in the useMutation hook to match the behavior of other mutation hooks like useDeleteCardMutation and usePutCardMutation. Use a toast library or component to show a success message when the comment deletion succeeds and an error message when it fails, ensuring consistent user feedback across mutations.

coderabbitai · 2025-06-22T05:10:01Z

src/app/features/dashboard_Id/api/usePostCommentMutation.ts

+// ✅ 댓글 생성 컴포넌트에서 사용 (CommentForm.tsx)
+export function usePostCommentMutation() {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: postComment,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 목록 캐시가 stale 상태임을 알리고 다시 fetch 하도록 유도함
+    },
+    onError: (error) => {
+      if (axios.isAxiosError(error)) {
+        const message = error.response?.data?.message
+        console.error('댓글 생성 실패:', message ?? '알 수 없는 에러')
+      } else {
+        console.error('댓글 생성 실패:', error)
+      }
+    },
+  })
+}


🛠️ Refactor suggestion

사용자 피드백 및 일관성 개선 필요

다른 mutation 훅들과의 일관성을 위해 토스트 알림을 추가해주세요.

mutationFn에서 매개변수를 명시적으로 받도록 개선을 권장합니다.

import { useMutation, useQueryClient } from '@tanstack/react-query' import axios from 'axios' +import { toast } from 'sonner' import { postComment } from './postComment' // ✅ 댓글 생성 컴포넌트에서 사용 (CommentForm.tsx) export function usePostCommentMutation() { const queryClient = useQueryClient() return useMutation({ - mutationFn: postComment, + mutationFn: (payload) => postComment(payload), onSuccess: () => { + toast.success('댓글이 작성되었습니다') queryClient.invalidateQueries({ queryKey: ['comments'] }) }, onError: (error) => { + toast.error('댓글 작성에 실패했습니다') if (axios.isAxiosError(error)) { const message = error.response?.data?.message console.error('댓글 생성 실패:', message ?? '알 수 없는 에러') } else { console.error('댓글 생성 실패:', error) } }, }) }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

// ✅ 댓글 생성 컴포넌트에서 사용 (CommentForm.tsx)

export function usePostCommentMutation() {

const queryClient = useQueryClient()

return useMutation({

mutationFn: postComment,

onSuccess: () => {

queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 목록 캐시가 stale 상태임을 알리고 다시 fetch 하도록 유도함

},

onError: (error) => {

if (axios.isAxiosError(error)) {

const message = error.response?.data?.message

console.error('댓글 생성 실패:', message ?? '알 수 없는 에러')

} else {

console.error('댓글 생성 실패:', error)

}

},

})

}

import { useMutation, useQueryClient } from '@tanstack/react-query'

import axios from 'axios'

import { toast } from 'sonner'

import { postComment } from './postComment'

// ✅ 댓글 생성 컴포넌트에서 사용 (CommentForm.tsx)

export function usePostCommentMutation() {

const queryClient = useQueryClient()

return useMutation({

mutationFn: (payload) => postComment(payload),

onSuccess: () => {

toast.success('댓글이 작성되었습니다')

queryClient.invalidateQueries({ queryKey: ['comments'] }) // 댓글 목록 캐시가 stale 상태임을 알리고 다시 fetch 하도록 유도함

},

onError: (error) => {

toast.error('댓글 작성에 실패했습니다')

if (axios.isAxiosError(error)) {

const message = error.response?.data?.message

console.error('댓글 생성 실패:', message ?? '알 수 없는 에러')

} else {

console.error('댓글 생성 실패:', error)

}

},

})

}

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/api/usePostCommentMutation.ts between lines 6 and 24, the mutation hook lacks toast notifications for user feedback and does not explicitly declare parameters in the mutation function. To fix this, add toast notifications in both onSuccess and onError handlers to inform users of the mutation result, and modify mutationFn to explicitly accept and use parameters for posting comments, ensuring consistency with other mutation hooks.

coderabbitai · 2025-06-22T05:10:01Z

src/app/features/dashboard_Id/api/usePutCommentsMutation.ts

+  return useMutation<CommentResponse, Error, PutCommentArgs>({
+    mutationFn: ({ payload, commentId }) => putComment(payload, commentId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['comments'] }) //'columnId' 쿼리 invalidate - 카드가 stale 상태임을 알리고 다시 fetch 하도록 유도함


🛠️ Refactor suggestion

Cache invalidation을 더 구체적으로 지정하세요.

현재 모든 댓글 쿼리를 무효화하고 있어 불필요한 네트워크 요청이 발생할 수 있습니다. 특정 카드의 댓글만 무효화하는 것이 더 효율적입니다.

-queryClient.invalidateQueries({ queryKey: ['comments'] }) +queryClient.invalidateQueries({ queryKey: ['comments', payload.cardId] })

하지만 현재 구조상 payload에 cardId가 없으므로, PutCommentArgs 인터페이스에 cardId를 추가하거나 다른 방법을 고려해야 합니다.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/api/usePutCommentsMutation.ts at line 19, the cache invalidation currently targets all 'comments' queries, causing unnecessary network requests. To fix this, modify the cache invalidation to target only the comments related to the specific card by including 'cardId' in the query key. Since 'cardId' is not present in the current payload, update the PutCommentArgs interface to include 'cardId' or find another way to pass 'cardId' to this function, then use it in queryClient.invalidateQueries to invalidate only the relevant card's comments.

coderabbitai · 2025-06-22T05:10:02Z

src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx

+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="relative flex gap-10 mobile:flex-col"
+    >
+      <textarea
+        {...register('content', {
+          required: '댓글 내용을 작성해주세요',
+        })}
+        className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 tablet:w-420"
+        id="content"
+        placeholder={content ? content : '댓글 작성하기'}
+      />
+      <div className="flex flex-col mobile:flex-row">
+        <button
+          type="button"
+          className="Text-gray-light h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"
+          onClick={onClose}
+        >
+          취소
+        </button>
+        <button
+          type="submit"
+          className="Text-blue h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"
+        >
+          수정
+        </button>
+      </div>
+    </form>
+  )


🛠️ Refactor suggestion

에러 상태 표시를 추가하세요.

폼 검증 에러나 API 에러를 사용자에게 표시해야 합니다.

에러 표시를 위한 요소를 추가하세요:

/> + {errors.content && ( + <p className="mt-2 text-12 text-red-500">{errors.content.message}</p> + )} <div className="flex flex-col mobile:flex-row">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

return (

<form

onSubmit={handleSubmit(onSubmit)}

className="relative flex gap-10 mobile:flex-col"

>

<textarea

{...register('content', {

required: '댓글 내용을 작성해주세요',

})}

className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 tablet:w-420"

id="content"

placeholder={content ? content : '댓글 작성하기'}

/>

<div className="flex flex-col mobile:flex-row">

<button

type="button"

className="Text-gray-light h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"

onClick={onClose}

>

취소

</button>

<button

type="submit"

className="Text-blue h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"

>

수정

</button>

</div>

</form>

)

return (

<form

onSubmit={handleSubmit(onSubmit)}

className="relative flex gap-10 mobile:flex-col"

>

<textarea

{...register('content', {

required: '댓글 내용을 작성해주세요',

})}

className="Text-black h-110 w-450 resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474] mobile:w-250 tablet:w-420"

id="content"

placeholder={content ? content : '댓글 작성하기'}

/>

{errors.content && (

<p className="mt-2 text-12 text-red-500">{errors.content.message}</p>

)}

<div className="flex flex-col mobile:flex-row">

<button

type="button"

className="Text-gray-light h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"

onClick={onClose}

>

취소

</button>

<button

type="submit"

className="Text-blue h-28 w-50 rounded-4 border border-[#D9D9D9] py-5 text-center text-12 font-medium dark:border-[#747474]"

>

수정

</button>

</div>

</form>

)

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/Card/cardModal/CommentModifyForm.tsx between lines 36 and 65, the form currently lacks any visible error messages for validation or API errors. Add UI elements below the textarea to display validation errors from the form state and any API errors. Use the error messages from the form's error object for validation errors and a state variable for API errors, ensuring users receive clear feedback when submission fails or input is invalid.

coderabbitai · 2025-06-22T05:10:02Z

src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx

+        <button
+          type="submit"
+          className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"
+        >
+          입력
+        </button>


🛠️ Refactor suggestion

제출 버튼의 상태 관리를 개선하세요.

폼 검증 상태와 제출 중 상태에 따라 버튼을 비활성화하고 로딩 상태를 표시해야 합니다.

<button type="submit" + disabled={!isValid || isSubmitting || isPending} className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]" > - 입력 + {isSubmitting || isPending ? '입력 중...' : '입력'} </button>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<button

type="submit"

className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"

>

입력

</button>

<button

type="submit"

disabled={!isValid || isSubmitting || isPending}

className="Text-blue absolute bottom-19 right-12 h-32 w-83 rounded-4 border border-[#D9D9D9] py-7 text-center text-12 font-medium dark:border-[#747474]"

>

{isSubmitting || isPending ? '입력 중...' : '입력'}

</button>

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx around lines 60 to 65, the submit button lacks state management for form validation and loading. Update the button to be disabled when the form is invalid or submission is in progress, and add a visual loading indicator (e.g., spinner or text change) during submission to improve user feedback.

coderabbitai · 2025-06-22T05:10:02Z

src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx

+        <textarea
+          {...register('content', {
+            required: '댓글 내용을 작성해주세요',
+          })}
+          className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"
+          id="content"
+          placeholder="댓글 작성하기"
+        />


🛠️ Refactor suggestion

폼 검증 에러 표시를 추가하세요.

사용자가 폼 검증 에러를 확인할 수 있도록 에러 메시지를 표시해야 합니다.

/> + {errors.content && ( + <p className="mt-2 text-12 text-red-500">{errors.content.message}</p> + )} <button

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<textarea

{...register('content', {

required: '댓글 내용을 작성해주세요',

})}

className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"

id="content"

placeholder="댓글 작성하기"

/>

<textarea

{...register('content', {

required: '댓글 내용을 작성해주세요',

})}

className="Text-black h-110 w-full resize-none rounded-6 border border-[#D9D9D9] p-16 text-14 placeholder-gray-400 dark:border-[#747474]"

id="content"

placeholder="댓글 작성하기"

/>

{errors.content && (

<p className="mt-2 text-12 text-red-500">{errors.content.message}</p>

)}

<button

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/Card/cardModal/CommentForm.tsx around lines 51 to 58, the textarea input has validation rules but does not display validation error messages to the user. Add a conditional rendering block below the textarea to show the error message from the form state (e.g., errors.content.message) so users can see why their input is invalid.

coderabbitai · 2025-06-22T05:10:02Z

src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx

+            onClick={(e) => {
+              e.stopPropagation()
+              deleteCard(card.id)
+            }}
+          >


⚠️ Potential issue

카드 삭제 전 확인 대화상자를 추가하세요.

현재 삭제 버튼 클릭 시 즉시 카드가 삭제됩니다. 실수로 삭제하는 것을 방지하기 위해 확인 대화상자가 필요합니다.

<button className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]" onClick={(e) => { e.stopPropagation() - deleteCard(card.id) + if (window.confirm('정말로 이 카드를 삭제하시겠습니까?')) { + deleteCard(card.id) + } }} >

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

onClick={(e) => {

e.stopPropagation()

deleteCard(card.id)

}}

>

<button

className="Text-black w-full whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"

onClick={(e) => {

e.stopPropagation()

if (window.confirm('정말로 이 카드를 삭제하시겠습니까?')) {

deleteCard(card.id)

}

}}

>

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx around lines 83 to 87, the deleteCard function is called immediately on button click without user confirmation. To prevent accidental deletions, wrap the deleteCard call inside a confirmation dialog by using window.confirm or a similar modal. Only call deleteCard(card.id) if the user confirms the action.

coderabbitai · 2025-06-22T05:10:02Z

src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx

+          <div>
+            <div className="Border-section flex w-200 flex-col gap-16 rounded-8 px-16 py-14 mobile:w-full mobile:flex-row mobile:py-9 tablet:w-181">
+              <div className="mobile:w-120">
+                <span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold">


⚠️ Potential issue

CSS 클래스명 오타를 수정하세요.

moblie:mb-0은 mobile:mb-0이어야 합니다.

- <span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold"> + <span className="Text-black mobile:mb-0 mb-6 block text-12 font-semibold">

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold">

<span className="Text-black mobile:mb-0 mb-6 block text-12 font-semibold">

🤖 Prompt for AI Agents

In src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx at line 152, there is a typo in the CSS class name "moblie:mb-0". Correct this typo by changing "moblie:mb-0" to "mobile:mb-0" to ensure the intended mobile margin-bottom style is applied properly.

…업데이트 함수 수정

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/app/features/dashboard_Id/api/useCardMutation.original.ts (2)
40-48: 가드 조건 로직을 개선할 수 있습니다.

현재 가드 조건이 여러 케이스를 처리하고 있지만, 각각의 조건에 대한 더 명확한 로깅이나 에러 처리가 도움이 될 것입니다.

다음과 같이 개선할 수 있습니다:
      // Guard return
      if (!currentCard) {
+        console.log('드래그 중인 카드가 없습니다')
        clearDraggingCard()
        return
      }
      
+      if (currentCard.cardData.id !== cardData.id) {
+        console.log('드래그 중인 카드와 mutation 대상 카드가 다릅니다')
+        clearDraggingCard()
+        return
+      }
+      
+      if (currentCard.cardData.columnId === columnId) {
+        console.log('같은 컬럼으로 이동하려고 합니다')
+        clearDraggingCard()
+        return
+      }
-      if (
-        !currentCard ||
-        currentCard.cardData.id !== cardData.id ||
-        currentCard.cardData.columnId === columnId
-      ) {
-        console.log('no dragging card || is not a dragging card || same column')
-        clearDraggingCard()
-        return
-      }
45-45: 프로덕션 환경에서 콘솔 로그를 제거하는 것을 고려해보세요.

디버깅용 콘솔 로그들이 여러 곳에 있습니다. 프로덕션 빌드에서는 이들을 제거하거나 적절한 로깅 라이브러리를 사용하는 것이 좋습니다.

Also applies to: 56-56, 71-71

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6f4d5f5 and 5ea58c8.

📒 Files selected for processing (3)

src/app/dashboard/[id]/page.tsx (2 hunks)
src/app/features/dashboard_Id/api/useCardMutation.original.ts (1 hunks)
src/app/features/dashboard_Id/api/useCardMutation.ts (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (2)

src/app/dashboard/[id]/page.tsx
src/app/features/dashboard_Id/api/useCardMutation.ts

⏰ Context from checks skipped due to timeout of 90000ms (1)

GitHub Check: eslint-check

🔇 Additional comments (6)

src/app/features/dashboard_Id/api/useCardMutation.original.ts (6)

1-5: 임포트 구조가 명확하고 적절합니다.

필요한 의존성들이 올바르게 임포트되어 있고, 타입과 함수들이 적절히 구조화되어 있습니다.

7-10: 훅 초기화가 적절합니다.

QueryClient와 드래그 스토어를 올바르게 초기화하고 있습니다.

11-21: mutation 함수 정의가 명확합니다.

타입 안전성을 보장하면서 필요한 매개변수들을 적절히 정의했습니다.

84-93: 에러 처리 로직이 적절합니다.

이전 데이터로의 롤백 처리가 올바르게 구현되어 있습니다.

95-101: 성공 시 쿼리 무효화가 적절합니다.

서버 데이터와의 동기화를 위한 쿼리 무효화가 올바르게 구현되어 있습니다.

52-77: 무한 스크롤 구현과의 호환성을 확인해야 합니다.

PR 목표에서 언급된 대로, 무한 스크롤 구현으로 인해 이 mutation 함수의 수정이 필요할 수 있습니다. 현재 코드는 CardResponse 타입을 직접 사용하고 있지만, 무한 스크롤에서는 InfiniteData<CardResponse> 구조가 필요할 수 있습니다.

다음 스크립트로 무한 스크롤 관련 구현체와의 호환성을 확인해보세요:
#!/bin/bash
# 무한 스크롤 관련 파일들과 InfiniteData 사용 현황 확인
echo "=== 무한 스크롤 관련 파일 검색 ==="
fd -e ts -e tsx | xargs rg -l "InfiniteData|useInfiniteQuery"

echo "=== useCardMutation 사용 현황 ==="
rg -A 5 -B 5 "useCardMutation"

echo "=== CardResponse 타입 사용 현황 ==="
rg -A 3 -B 3 "CardResponse"

jyn and others added 19 commits June 21, 2025 04:47

✨ feat: 카드 상세 모달 상단 UI 및 반응형 구현 완료

7239a6c

📝 TODO: - 담당자 옆 아바타에 반응형 사이즈 적용 필요 - 카드 수정 모달의 컬럼 선택 값을 form 데이터와 연결 필요

Merge branch 'feature/dashboard_id-ModifyCardModal' into feature/dash…

8b5e019

…board_id-CardModal

✨ feat: 댓글 생성,수정 완성 / useIsMobile공통 함수 생성

14d0c65

✨ feat: 댓글 삭제 기능 완성, Avatar에 shrink-0클래스 추가

aa087ad

✨ feat: 카드 삭제 기능 완성

1363449

✨ feat: 모달 있을때 배경 스크롤 막는 useLockBodyScroll 훅 작성

3bd923b

🐛🐰: 코드래빗 리뷰 반영, 뮤테이션 함수쪽에 토스트 추가

1e0becf

✨ feat: 무한스크롤-카드리스트, 카드모달 내 댓글리스트에 적용

4797529

🐛 fix: 주석 제거 및 쿼리키 정정(-->캐시 업데이트 다시 정상적으로 작동)

fe9355f

Merge pull request #99 from CoPlay-FE/feature/dashboard_id-CardModal

1f2b585

✨ Feat: 카드 상세 모달 구현

🎨 styel: 폼 스타일 수정중

5101caa

Merge pull request #101 from CoPlay-FE/feature/dashboard_id-CardModal

411d887

✨ Feat: 카드 목록, 모달 내 댓글 목록에 무한 스크롤 구현

🎨 style: 반응형 작업중

aa2232d

🎨

1df1876

🎨

6028ed3

Merge pull request #105 from CoPlay-FE/feature/dashboard_id-CardModal

70a348f

🎨 style: 반응형 및 스타일 점검

Merge branch 'feature/dashboard_id' of https://github.com/CoPlay-FE/c…

f64a01c

…oplan into feature/dashboard_id

🫧 modify: 스타일 수정 및 코드 점검중..

6779629

🐛 fix: 무한스크롤 적용에 따른, 드래그앤드롭 뮤테이션 함수 수정 필요함

6f4d5f5

coderabbitai bot reviewed Jun 22, 2025

View reviewed changes

jyn added 2 commits June 22, 2025 17:20

🐛 fix: useInfiniteQuery (무한스크롤)적용 후 캐시 구조 변경 (InfiniteData) 반영하여 낙관적 …

5ea58c8

…업데이트 함수 수정

Merge branch 'develop' into feature/dashboard_id

91d395a

coderabbitai bot reviewed Jun 22, 2025

View reviewed changes

🫧 modify: useCardMutation.original파일 삭제

1c14577

dkslel1225 changed the title ~~develop <-- Feature/dashboard / *고칠 거 아직 남아있음~~ develop <-- Feature/dashboard & 🐛fix: useCardMutation에 InfiniteData타입 반영 Jun 22, 2025

dkslel1225 merged commit 3707c4b into develop Jun 22, 2025
1 of 2 checks passed

dkslel1225 self-assigned this Jun 22, 2025

	<span className="Text-black moblie:mb-0 mb-6 block text-12 font-semibold">
	<span className="Text-black mobile:mb-0 mb-6 block text-12 font-semibold">

Conversation

dkslel1225 commented Jun 22, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 남은 작업

✨ 요약

📝 상세 내용

🔗 관련 이슈

🖼️ 스크린샷

✅ 체크리스트

💡 참고 사항

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jun 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested labels

Suggested reviewers

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jun 22, 2025

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dkslel1225 commented Jun 22, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jun 22, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)